<template>
  <div class="viptable">
    <el-table :data="tableData"
              border
              style="width: 100%">
      <el-table-column prop=""
                       align='center'
                       label="产品图片">
        <template v-slot='scoped'>
          <el-avatar :size="50"
                     shape='square'
                     :src="scoped.row.imageUrl"></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="productName"
                       label="产品名称"
                       width="180">
      </el-table-column>
      <el-table-column prop="description"
                       label="产品描述">
      </el-table-column>
      <el-table-column prop="price"
                       label="单价(元)">
      </el-table-column>
      <el-table-column prop="inventory"
                       label="库存">
      </el-table-column>
      <el-table-column align="center"
                       label="支付">
        <template v-slot='scoped'>
          <el-button type="primary"
                     @click="preorder(scoped.row)">充值</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>
</template>

<script>
  import { vipproduct } from '../../../../api'
  import { mapState, mapActions, mapMutations } from 'vuex'
  export default {
    data() {
      return {
        tableData: []
      }
    },
    components: {
    },
    methods: {
      ...mapMutations(['SET_PREORDER']),
      preorder(row) {
        console.log(row);
        this.$confirm('此操作将购买vip, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'success'
        }).then(() => {
          //1.将购买的产品存入vuex
          this.SET_PREORDER(row)
          //2.页面跳转到preorder页面
          this.$router.push({name: 'pre_order'})
          //3.展示商品详情
        }).catch(() => {
          this.$message({
            type: 'warning',
            message: '已取消购买'
          });
        });
      }
    },
    computed: {
    },
    created() {
      vipproduct('20210827165510715').then((res) => {
        if (res.data.state) {
          this.tableData = res.data.data
        }
      })
    }
  }

</script>

<style lang='scss' scoped>
  .el-avatar {
  	width: 158px !important;
  }
</style>

